<template>
  <div>
    <!-- 图片弹框 -->
    <el-dialog title="图片"
               :visible.sync="photo"
               width="21%"
               >
       <el-image
           style="width: 360px;"
           :src="phoUrl">
         </el-image>
    </el-dialog>

    <!-- 弹框 -->
    <el-dialog title="编辑页面"
               :visible.sync="dialogFormVisible"
               width="25%"
               :before-close="gb">
      <el-form :model="form" :rules="rules" ref="form"  label-width="66px">
        <el-form-item label="用户名" prop="username" >
          <el-input v-model="form.username" clearable></el-input>
        </el-form-item>
        <el-form-item label="学号" prop="stuNo" >
          <el-input v-model="form.stuNo" clearable></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="name" >
            <el-input v-model="form.name" clearable></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex" >
            <el-radio-group v-model="form.sex">
              <el-radio label="男"></el-radio>
              <el-radio label="女"></el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-upload
            class="upload-demo"
            drag
            action="tpbc"
            :before-upload="beforeupload">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="save" :disabled="saveBtn">确 定</el-button>
        <el-button @click="qx()">取 消</el-button>
      </div>
    </el-dialog>
    <el-card>
      <el-form ref="select" label-width="80px">
        <el-select v-model="value" placeholder="请选择班级" >
          <el-option v-for="item,x in select" :key="x" :label="item.className" :value="item.id"></el-option>
        </el-select>
      </el-form>
    </el-card>
   <el-card v-if="this.queryParams.tbclassId" style="margin-top: 1.5625rem;">
   <p>
      <el-row>
        <el-col :span="20">
          <el-button @click="add()" round icon="el-icon-plus">新增</el-button>
          <el-button @click="refreshtable()" round icon="el-icon-refresh">刷新</el-button>
        </el-col>
        <el-col :span="4">
          <el-input placeholder="查询内容" clearable v-model="queryParams.search" clearable @change="searchChange"></el-input>
        </el-col>
      </el-row>
    </p>
     <el-table
        :data="student"
        border
        style="width: 100%;min-height: 60vh;">
        <el-table-column
           prop="username"
           label="用户名"
           width="180">
         </el-table-column>
       <el-table-column
          prop="stuNo"
          label="学号"
          width="180">
        </el-table-column>
        <el-table-column
           prop="name"
           label="名字"
           width="180">
         </el-table-column>
        <el-table-column
          prop="sex"
          label="性别">
        </el-table-column>
         <el-table-column
            fixed="right"
            label="操作"
            width="200">
            <template slot-scope="scope">
              <el-button type="primary" icon="el-icon-edit" circle size="small" @click="edit(scope.row)"></el-button>
              <el-button type="success" icon="el-icon-picture-outline" circle size="small" @click="tp(scope.row)"></el-button>
              <el-button type="warning" icon="el-icon-lock" circle size="small" @click="upPwd(scope.row)"></el-button>
              <el-button type="danger" icon="el-icon-delete" circle size="small" @click="del(scope.row)"></el-button>
            </template>
          </el-table-column>
      </el-table>
     <div style="margin-top: 1.25rem;">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryParams.page"
          :page-sizes="[3, 10, 30, 50]"
          :page-size="queryParams.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
     </el-card>



  </div>
</template>

<script>
  export default{
    data() {
      return {
        student: [],
        select: {},
        value:'',
        search:'',
        dialogTableVisible: false,
        dialogFormVisible: false,
        photo:false,
        form:{
          username:'',
          stuNo:'',
          name:'',
          sex:'',
          tbclassId:'',
        },
        phoUrl:'',
        param:{},
        total:0,
        saveBtn:false,
        rules:{
          username:[
            { required: true, message: '请输入用户名', trigger: 'blur' },
          ],
          name:[
            { required: true, message: '请输入姓名', trigger: 'blur' },
          ],
          stuNo:[
            { required: true, message: '请输入学号', trigger: 'blur' },
          ],
          sex:[
            { required: true, message: '请输入姓别', trigger: 'blur' },
          ]
        },
        queryParams:{
          limit:10,
          page:1,
          sort:'stuNo',
          order:'asc',
          search:'',
          tbclassId:''
        },
      }
    },
    methods:{
      gb(done){
        emptyObj(this.form)
        done();
      },
      qx(){
        emptyObj(this.form)
        this.dialogFormVisible = false
      },
      add(){
        this.param={};
        this.dialogFormVisible = true
      },
      edit(row){
        this.param={};
        this.form=Object.assign({},row);
        this.dialogFormVisible = true
      },
      tp(row){
        this.phoUrl=this.$ajax.defaults.baseURL+"student/download?id="+row.id
        console.log(this.phoUrl)
        this.photo=true
      },
      upPwd(row){
        this.$confirm('密码重置后无法恢复, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$ajax.post('student/pwdup',row).then(res=>{
             this.refreshtable();
             this.$notify({
                type: 'success',
                message: '重置成功!',
                position: 'bottom-right'
              });
          })
        }).catch(() => {
          this.$notify({
             type: 'success',
             message: '取消重置',
             position: 'bottom-right',
             type: 'info'
           });
        });
      },
      save(){
        this.$refs.form.validate(valid=>{
          this.saveBtn=true
          if (valid) {
            this.form.tbclassId=this.queryParams.tbclassId
            this.$ajax.post('student/save',Object.assign({},this.param,this.form)).then(res=>{
              var result = res.data
              if (result.success) {
                this.$notify({
                  type:'success',
                  title: '提示',
                  message: '数据保存成功',
                  position: 'bottom-right'
                });
                this.saveBtn=false
                this.dialogFormVisible = false
                emptyObj(this.form)
                this.refreshtable();
              }else{
                this.$notify({
                  type:'error',
                  title: '提示',
                  message: '数据保存失败',
                  position: 'bottom-right'
                });
                this.dialogFormVisible = false
                emptyObj(this.form)
                this.refreshtable();
              }

            })
          }else{
          this.saveBtn=false
          }
        })


      },
      del(row) {
        this.$confirm('删除后无法恢复, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          console.log(row)
          this.$ajax.post('student/delete',row).then(res=>{
             this.refreshtable();
             this.$notify({
                type: 'success',
                message: '删除成功!',
                position: 'bottom-right'
              });
          })
        }).catch(() => {
          this.$notify({
             type: 'success',
             message: '取消删除',
             position: 'bottom-right',
             type: 'info'
           });
        });
      },
      refreshtable(){
        if(this.queryParams.limit*(this.queryParams.page-1)>=this.total&&this.queryParams.page>1){
                  this.queryParams.page--;
        }
        this.$ajax.post('student/page',this.queryParams).then(res=>{
          var result = res.data;
          if (result.success) {
            /* this.student=result.data; */
            this.student=result.data.rows;
            this.total=result.data.total;
          }
        }).catch(err=>{})
      },
      handleSizeChange(val) {
        this.queryParams.limit=val;
        this.refreshtable();
      },
      handleCurrentChange(val) {
        this.queryParams.page=val;
        this.refreshtable();
      },
      searchChange(){
        this.refreshtable();
      },
      sel(){
        this.$ajax.post('tbclass/page',{}).then(res=>{
          var result = res.data;
          if (result.success) {
            this.select=result.data.rows;
          }
        }).catch(err=>{})
      },
      beforeupload(file){
        this.param.file=file
        return false;
      }

    },
    mounted() {
      this.sel()
    },
    watch: {
      value(newValue, oldValue) {
        this.queryParams.tbclassId=newValue
        this.refreshtable();
      }
    },

  }
  function emptyObj(obj){
    if (obj.file) {
      obj.file='';
    }
    for( var key in obj){
      var o = obj[key];
      if(o instanceof Object){
        emptyObj(o);
      }else{
        obj[key]='';
      }
    }
  }
</script>

<style>
</style>
